<template>
    <div class="hot-content">
      <div class="hot-title">
         <img class="hot-img" src="http://img1.qunarzz.com/piao/fusion/1711/16/bfbb9874e8f11402.png" alt="">
         <span class="title-text">本周热门榜单</span>
         <a href="" class="title-more">
             全部榜单
             <span class="iconfont">&#xe62a;</span>
         </a>
      </div>
     
      <div class="hot-sale-list">
    
       <swiper :options="swiperOption">
        <swiper-slide  v-for=" (item ,index) in hotGoods" :key="index">
         <div class="hot-sale-item">
            <router-link :to="'/detail/'+item.goodsId" >
               <div class="topone">
                
                   
               
                <img class="top-img" :src="item.hotimg" alt=""></div>
                <img :src="item.image" width="80%" />
                <div class="item-name">{{item.name}}</div>
                <div class="item-price-div">
                    <span class="item-price">￥{{item.price}}</span>起
                </div> 
        
                 </router-link>
                
               </div>
        </swiper-slide>
       </swiper>

      </div>
    </div>
</template>

<script>
    export default {
        name:"HomeHot",
        props:{
          hotGoods:Array
        },
        data(){
            return{
     swiperOption:{
      slidesPerView:3,
     
     },
     

        



            }
        }
    }
</script>

<style lang="stylus" scoped>
@import '~styles/mixins.styl'
.hot-content
   width 100%
   background-color #ffffff
   margin-top .2rem
  
  .hot-title
    position: relative
    padding: .24rem 0 .1rem;
    font-size 20px
    height .6rem
    line-height .6rem
    .hot-img
      width: .4rem;
      height: .4rem;
      margin-left: .2rem; 
    .title-text
      display: inline-block;
      margin-left: .08rem;
      height: .44rem;
      color: #212121;
      font-size: .32rem;
      line-height: .44rem;
    .title-more
      position: absolute;
      top: .36rem;
      right: .32rem;
      color: #616161;
      font-size: .30rem;
      line-height: .34rem;
  .topone
     position absolute 
     z-index 99
       
    .top-img
      height .5rem
  .hot-sale-list
     position relative
     padding-left .2rem;
     .hot-sale-item
        display: inline-block;
        padding: .06rem 0 .2rem;
        width: 2.6rem;
       .item-name
         width 2.2rem 
         margin-top: .12rem;
         color: #212121;
         font-size: .24rem;
         line-height: .32rem;
         text-align: center;
         ellipsis() 
       .item-price-div
         width 2.2rem 
         margin-top: .12rem;
         color: #212121;
         font-size: .24rem;
         line-height: .32rem;
         text-align: center;
         ellipsis() 
         .item-price
           color #ff8300


   
</style>